<template>
  <div>
    <NavBar class="hd-navbar" @click-left="onClickLeft">
      <template #left>
          <Icon name="wap-home-o" size="18" color="#ccc" />
      </template>
      <template #title>
        <HeaderSearch bg="#f1f1f1">
          <Icon name="search" size="18" color="#ccc" />
          <span class="g-font-14 g-text-gray">家用洗衣机</span>
        </HeaderSearch>
      </template>
    </NavBar>

    <div class="g-flex">
      <div class="sidebar-wrap scroll">
        <Sidebar v-model="activeKey" @change="onChange">
          <SidebarItem v-for="n in sidebarItems" :title="n" :key="n" />
        </Sidebar>
      </div>
      <div style="flex:1" class="bg-white scroll">
        <ul>
          <li v-for="item in activeContent" :key="item.title">
            <div class="g-text-bold g-mt-10 g-ml-10">{{item.title}}</div>
            <Grid :column-num="3" icon-size="50" :border="false">
              <GridItem
                v-for="cate in item.list"
                :key="cate.id"
                :icon="cate.thumb"
                :text="cate.title"
              />
            </Grid>
          </li>
        </ul>
        <Empty description="暂无分类信息"  v-show="!activeContent"/>
      </div>
    </div>
    <TabBar :active='1'/>
  </div>
</template>

<script>
import { Sidebar, SidebarItem, Icon, NavBar, Grid, GridItem,Empty } from "vant";
import HeaderSearch from "../../components/HeaderSearch";
import TabBar from "../../components/TabBar";
import sidebarData from '../../libs/sidebarData'
export default {
  name: "categroy",
  components: {
    Sidebar,
    TabBar,
    SidebarItem,
    HeaderSearch,
    Icon,
    NavBar,
    Grid,
    GridItem,
    Empty 
  },
  data() {
    return {
      activeKey: 0,
      activeContent: [],
      ...sidebarData
    };
  },
  methods: {
    onChange(n) {
      this.activeContent = this.sidebarContent[n];
    },
    onClickLeft() {
      location.href = '/home'
    }
  },
  created() {
    this.activeContent = this.sidebarContent[0]
  }
};
</script>

<style scoped lang='scss'>
@import '@/assets/common.scss';
.sidebar-wrap {
  width: 85px;
}
.scroll {
  height: calc(100vh - 94px);
  overflow-y: auto;
}
</style>
